<template>
	<div id="nav">
		<router-link to="/">
			<i class="el-icon-s-home icon"></i>
			<div>首页</div>
		</router-link>
		<router-link to="/channel">
			<i class="el-icon-s-promotion icon"></i>
			<div>频道</div>
		</router-link>
		<router-link to="/state">
			<i class="el-icon-share icon"></i>
			<div>动态</div>
		</router-link>
		<router-link to="/my">
			<i class="el-icon-s-custom icon"></i>
			<div>我的</div>
		</router-link>
	</div>
</template>

<script>
export default{
	name:'tabnav'
}
</script>

<style>
#nav {
	width: 100%;
	position: fixed;
	left: 0;
	bottom: 0;
	background: #f2f7ff;
	box-sizing: border-box;
	display: flex;
	justify-content: space-around;
	align-items: center;
	min-height: 46px;
	z-index: 999;
}

#nav a {
	text-decoration: none;
	/* font-weight: bold; */
	/* color: #7c7c7c; */
	color: #666666;
}

#nav a.router-link-exact-active {
  color: #ffa2bb;
}

#nav a div{
	font-size: 0.75rem;
}
.icon{
	font-size: 1.375rem;
}
</style>
